<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Computed 属性 vs Watched 属性</title>
</head>
<body>
	<div id="demo">{{fullName}}</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
	// var vm = new Vue({
	// 	el: '#demo',
	// 	data: {
	// 		firstName : 'Foo',
	// 		lastName: 'Bar',
	// 		fullName: 'Foo Bar'
	// 	},
	// 	watch: {
	// 		firstName: function(val){
	// 			this.fullName = val + '' + this.lastName
	// 		},
	// 		lastName: function(val){
	// 			this.fullName = this.firstName + '' + val
	// 		}
	// 	}
	// })

	var vm = new Vue({
		el: '#demo',
		data: {
			firstName: 'Foo',
			lastName: 'Bar'
		},
		// computed: {
		// 	fullName: function() {
		// 		return this.firstName + '' + this.lastName
		// 	}
		// }
		
		computed: {
			fullName: {
				//getter
				get: function(){
					return this.firstName + '' + this.lastName
				},
				//setter
				set: function(newValue) {
					var names = newValue.split('')
					this.firstName = name[0]
					this.lastName = names[names.length  - 1]
				}
			}
		}
	})
</script>
</html>